
/**
 * 筛选动画浮层
 */

import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Animated, Easing } from 'react-native'
import screen from '../common/screen'

class FilterPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      offset: new Animated.Value(0),
      show: false
    }
  }

  in() {
    Animated.timing(
      this.state.offset,
      {
        easing: Easing.linear,
        duration: 300,
        toValue: 1
      }
    ).start()
  }

  out() {
    Animated.timing(
      this.state.offset,
      {
        easing: Easing.linear,
        duration: 300,
        toValue: 0
      }
    ).start()

    setTimeout(
      () => this.setState({ show: false }),
      300
    )
  }

  show() {
    this.setState({
      show: true
    }, this.in())
  }

  hide() {
    this.out()
    this.props.hide()
  }



  render() {
    let {containerHeight,modalBoxHeight,modalBoxTop,modalBoxBg,animatedHeight,modalBoxWidth,modalBoxMarginLeft,hidePosition} =this.props
    if (this.state.show) {
      return (

        hidePosition == 'bg' ?
        
        <View style={[styles.container,{height:containerHeight}]} onPress={this.hide.bind(this)}>
          <TouchableOpacity onPress={this.hide.bind(this)} style={{ height:screen.height}}>
            <View style={{ height:screen.height}}></View>
          </TouchableOpacity>
          <Animated.View style={[styles.modalBox, {height:modalBoxHeight,width:modalBoxWidth,marginLeft:modalBoxMarginLeft,top:modalBoxTop,backgroundColor:modalBoxBg,
            transform: [{
              translateY: this.state.offset.interpolate({
                inputRange: [0, 1],
                outputRange: [screen.height, animatedHeight]
              }),
            }]
          }]}>
            {this.props.children}
          </Animated.View>
          
        </View>:
        <View style={[styles.container,{height:containerHeight}]}>
          <TouchableOpacity  style={{ height:screen.height}}>
            <View style={{ height:screen.height}}></View>
          </TouchableOpacity>
          <Animated.View style={[styles.modalBox, {height:modalBoxHeight,width:modalBoxWidth,marginLeft:modalBoxMarginLeft,top:modalBoxTop,backgroundColor:modalBoxBg,
            transform: [{
              translateY: this.state.offset.interpolate({
                inputRange: [0, 1],
                outputRange: [screen.height, animatedHeight]
              }),
            }]
          }]}>
            {this.props.children}
          </Animated.View>
          
        </View>
      )
    }
    return <View />
  }
}

const styles = StyleSheet.create({
  container: {
    width: screen.width,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    position: 'absolute',
    top: 0,
    justifyContent: 'center',
  },
  modalBox: {
    position: 'absolute',
    paddingBottom: screen.screenBottomInset,
    borderRadius:6,
  }
})

FilterPage.defaultProps = {
  modalBoxHeight:250,
  modalBoxWidth:screen.width*0.8,
  modalBoxMarginLeft:screen.width*0.1,
  containerHeight: screen.height,
  modalBoxTop:0,
  modalBoxBg:'#fff',
  animatedHeight:(screen.height - 250)*0.5,
  hidePosition:'bg',
  hide: function() {}
}

export default FilterPage